<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="100px">
      <el-form-item :label="$t('payroll_group_name')" prop="groupName">
        <el-input v-model="queryParams.groupName" :placeholder="$t('please_enter', { name: $t('payroll_group_name') })"
          :show-word-limit="true" clearable @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item :label="$t('payroll_group_code')" prop="groupCode">
        <el-input v-model="queryParams.groupCode" :placeholder="$t('please_enter', { name: $t('payroll_group_code') })"
          :show-word-limit="true" clearable @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">{{ $t("search") }}</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">{{
          $t("reset")
        }}</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd"
          v-hasPermi="['salary:salaryGroup:add']">{{ $t("add") }}</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport"
          v-hasPermi="['salary:salaryGroup:export']">{{ $t("export") }}</el-button>
      </el-col>
      <el-col :span="1.5">
        <!-- <el-button
          type="info"
          plain
          icon="el-icon-upload"
          size="mini"
          @click="handleImport"
          v-hasPermi="['salary:salaryGroup:import']"
          >导入</el-button
        > -->
      </el-col>
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>

    <el-table v-loading="loading" :data="salaryGroupList" @selection-change="handleSelectionChange" border :max-height="tableHeight">
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column :label="$t('payroll_group_name')" align="center" prop="groupName" :show-overflow-tooltip="true" />
      <el-table-column :label="$t('payroll_group_code')" align="center" prop="groupCode" :show-overflow-tooltip="true" />
      <el-table-column :label="$t('payroll_group_description')" align="center" prop="groupDesc"
        :show-overflow-tooltip="true" />
      <el-table-column :label="$t('last_modification_time')" align="center" prop="updateTime" width="180">
        <template slot-scope="scope">
          <span>{{
            parseTime(scope.row.updateTime, "{y}-{m}-{d} {h}:{i}:{s}")
          }}</span>
        </template>
      </el-table-column>
      <el-table-column :label="$t('modified_by')" align="center" prop="updateBy" :show-overflow-tooltip="true" />
      <el-table-column :label="$t('action')" align="center" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button size="mini" type="text" icon="el-icon-view" @click="handleView(scope.row)"
            v-hasPermi="['salary:salaryGroup:view']">{{ $t("view") }}</el-button>
          <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)"
            v-hasPermi="['salary:salaryGroup:edit']">{{ $t("modify") }}</el-button>
          <el-button size="mini" type="text" icon="el-icon-view" @click="handleReport(scope.row)"
            v-hasPermi="['salary:salaryGroup:report']">{{ $t("payroll_report") }}</el-button>
          <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)"
            v-hasPermi="['salary:salaryGroup:remove']">{{ $t("delete") }}</el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
      @pagination="getList"
      :page-sizes="[10,20,30,50,100, 200]"
      />

    <!-- 添加或修改薪酬组对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="1000px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="100px" :disabled="lookView"  @submit.native.prevent>
        <el-card class="box-card" style="margin-bottom: 20px">
          <div slot="header" class="clearfix">
            <span>{{ $t("basic_information") }}</span>
          </div>
          <el-form-item :label="$t('payroll_group_name')" prop="groupName">
            <el-input v-model="form.groupName" :placeholder="$t('please_enter', { name: $t('payroll_group_name') })
              " :show-word-limit="true" />
          </el-form-item>
          <el-form-item :label="$t('payroll_group_code')" prop="groupCode">
            <el-input v-model="form.groupCode" :placeholder="$t('please_enter', { name: $t('payroll_group_code') })
              " :show-word-limit="true" />
          </el-form-item>
          <el-form-item :label="$t('payroll_group_description')" prop="groupDesc">
            <el-input v-model="form.groupDesc" type="textarea" :placeholder="$t('please_enter', { name: $t('payroll_group_description') })
              " />
          </el-form-item>
          <el-form-item :label="$t('payroll_cycle')" prop="dateAge">
            <div v-for="(item, index) in cycleList" :key="index">

              <div style="margin-bottom: 10px" class="date-age">
                <el-select v-model="item.startMonthType" :placeholder="$t('please_select', { name: $t('month') })" style="width:120px;margin-right:20px">
                  <el-option v-for="dict in dict.type.salary_group_month_type " :key="dict.value" :label="dict.label"
                    :value="dict.value">
                  </el-option>
                </el-select>
                <el-select v-model="item.startDate" :placeholder="$t('please_select', { name: $t('date') })" style="width:120px;margin-right:10px">
                  <el-option v-for="dict in dict.type.salary_group_month_date " :key="dict.value" :label="dict.label"
                    :value="dict.value">
                  </el-option>
                </el-select>
                <span style="margin-right:10px">{{ $t('to') }}</span>
                <el-select v-model="item.endMonthType" :placeholder="$t('please_select', { name: $t('month') })" style="width:120px;margin-right:20px">
                  <el-option v-for="dict in dict.type.salary_group_month_type " :key="dict.value" :label="dict.label"
                    :value="dict.value">
                  </el-option>
                </el-select>
                <el-select v-model="item.endDate" :placeholder="$t('please_select', { name: $t('date') })" style="width:120px;margin-right:20px">
                  <el-option v-for="dict in dict.type.salary_group_month_date " :key="dict.value" :label="dict.label"
                    :value="dict.value">
                  </el-option>
                </el-select>
                <!-- <el-date-picker slot="prepend" v-model="item.dateAge" type="daterange" clearable range-separator="-"
                  :start-placeholder="$t('start_date')" :end-placeholder="$t('ending_date')" value-format="MM-dd"
                  format="MM-dd" :picker-options="pickerOptions" style="width: 300px">
                </el-date-picker> -->
                <el-input v-model="item.salaryCycleName" :placeholder="$t('cycle_name')"
                  style="width: 200px; margin-left: 10px">
                </el-input>
                <el-button type="danger" plain @click="deleteCycle(index)" v-if="index > 0" style="margin-left: 10px">{{
                  $t("delete") }}</el-button>
              </div>
            </div>
            <el-button type="primary" plain @click="addCycle" style="width: 100%">{{ $t("add") }}</el-button>
          </el-form-item>
          <el-form-item :label="$t('number_of_paid_days')" prop="salaryDays">
            <el-select v-model="form.salaryDays" :placeholder="$t('please_select', { name: $t('number_of_paid_days') })
              ">
              <el-option v-for="dict in dict.type.salary_days" :key="dict.value" :label="dict.label"
                :value="dict.value"></el-option>
            </el-select>
          </el-form-item>
        </el-card>
        <el-card class="box-card" style="margin-bottom: 20px">
          <div slot="header" class="clearfix">
            <span>{{ $t("employee_information") }}</span>
          </div>
          <div class="project-content">
            <div class="project-item" v-for="(item, index) in employeeList" :key="index">
              <div class="project-item-name" style="text-align: right">
                {{ item.paramName }}：<span style="margin-left: 20px">{{
                  $t("system_data")
                }}</span>
              </div>
              <div>
                <el-checkbox v-model="item.isShowSalaryReport" true-label="1" false-label="0">{{
                  $t("display_in_payroll_report") }}</el-checkbox>
                <el-checkbox v-model="item.isShowPaySheet" true-label="1" false-label="0">{{ $t("display_in_payslip")
                }}</el-checkbox>
              </div>

              <div class="project-option" v-if="!lookView">
                <el-button size="mini" type="text" @click="handleEmployeeDeleteProject(item)">{{ $t("delete")
                }}</el-button>
                <el-button size="mini" type="text" :disabled="index == 0" @click="handleEmployeeUpProject(index)">{{
                  $t("move_up") }}</el-button>
                <el-button size="mini" type="text" :disabled="index == employeeList.length - 1"
                  @click="handleEmployeeDownProject(index)">{{ $t("move_down") }}</el-button>
              </div>
            </div>
          </div>
          <el-button style="width: 100%" type="primary" icon="el-icon-plus" plain @click="handleEmployeeAddProject">{{
            $t("add") }}</el-button>
        </el-card>
        <el-card class="box-card" style="margin-bottom: 20px">
          <div slot="header" class="clearfix">
            <span>{{ $t("payroll_item") }}</span>
          </div>
          <div class="project-content">
            <div class="project-item" v-for="(item, index) in salaryProjectList" :key="index">
              <div class="project-item-name">
                {{ item.projectName }}
                <span v-for="dict in dict.type.salary_project_data" :key="dict.value" :label="dict.value.toString()">
                  <span v-if="item.projectDataSource == dict.value">
                    : {{ dict.label }}</span>
                </span>
              </div>
              <div>
                <el-checkbox v-model="item.isShowSalaryReport" true-label="1" false-label="0">{{
                  $t("display_in_payroll_report") }}</el-checkbox>
                <el-checkbox v-model="item.isShowPaySheet" true-label="1" false-label="0">{{ $t("display_in_payslip")
                }}</el-checkbox>
              </div>

              <div class="project-option" v-if="!lookView">
                <el-button size="mini" type="text" @click="handleDeleteProject(item)">{{ $t("delete") }}</el-button>
                <el-button size="mini" type="text" :disabled="index == 0" @click="handleUpProject(index)">{{ $t("move_up")
                }}</el-button>
                <el-button size="mini" type="text" :disabled="index == salaryProjectList.length - 1"
                  @click="handleDownProject(index)">{{ $t("move_down") }}</el-button>
              </div>
            </div>
          </div>
          <el-button style="width: 100%" type="primary" icon="el-icon-plus" plain @click="handleAddProject">{{
            $t("add_payroll_item") }}</el-button>
        </el-card>
        <el-card class="box-card" style="margin-bottom: 20px">
          <div slot="header" class="clearfix">
            <span>{{ $t("payment_information") }}</span>
          </div>
          <el-form-item :label="$t('payment_method')" prop="paymentMethod">
            <el-radio-group v-model="form.paymentMethod">
              <el-radio v-for="dict in dict.type.payment_method" :key="dict.value" :label="dict.value">{{ dict.label
              }}</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item :label="$t('payment_currency')" prop="currencyType">
            <el-select v-model="form.currencyType" :placeholder="$t('please_select', { name: $t('payment_currency') })
              ">
              <el-option v-for="dict in dict.type.currency_type" :key="dict.value" :label="dict.label"
                :value="dict.value"></el-option>
            </el-select>
          </el-form-item>
        </el-card>
        <el-card class="box-card" style="margin-bottom: 20px">
          <div slot="header" class="clearfix">
            <span>{{ $t("employer_configuration") }}</span>
          </div>
          <el-form-item :label="$t('select_employing_company')">
            <employerListSelect :employerlist="employerlist" @geteMployerList="geteMployerList"></employerListSelect>
          </el-form-item>
        </el-card>
      </el-form>
      <div slot="footer" class="dialog-footer" v-if="!lookView">
        <el-button type="primary" @click="submitForm">{{
          $t("confirm")
        }}</el-button>
        <el-button @click="cancel">{{ $t("cancel") }}</el-button>
      </div>
    </el-dialog>
    <!-- 选择薪酬组弹框 -->
    <salaryProjectModal ref="salaryProjectModal" :checkData="salaryProjectList" @setCheckData="setCheckData">
    </salaryProjectModal>
    <!-- 选择员工弹框 -->
    <employeetModal ref="employeetModal" :checkData="employeeList" @setCheckData="setEmployeeCheckData">
    </employeetModal>

    <!-- 导入弹窗 -->
    <importModal ref="importModal" :title="$t('import')" downloadUrl="/salary/salaryGroup/downloadTemplate.do"
      uploadUrl="/salary/salaryGroup/importTemplate.do" :downloadName="$t('download_template')" @refreshList="getList">
    </importModal>
  </div>
</template>

<script>
import {
  listSalaryGroup,
  getSalaryGroup,
  delSalaryGroup,
  addSalaryGroup,
  updateSalaryGroup,
} from "@/api/salary/salaryGroup";
import salaryProjectModal from "./salaryProjectModal.vue";
import employeetModal from "./employeetModal.vue";
import importModal from "@/views/components/custom/importModalTwo.vue";
import employerListSelect from "./employerListSelect";
import moment from "moment";
export default {
  name: "SalaryGroup",
  dicts: [
    "currency_type",
    "payment_method",
    "salary_days",
    "salary_project_data",
    'salary_group_month_type',
    'salary_group_month_date'
  ],
  components: {
    salaryProjectModal,
    employeetModal,
    importModal,
    employerListSelect,
  },
  data() {
    return {
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 薪酬组表格数据
      salaryGroupList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        groupName: null,
        groupCode: null,
      },
      // 表单参数
      form: {},
      // 表单校验
      rules: {},
      //薪酬范围
      dateAge: [],
      selectDate: "",
      pickerOptions: {
        onPick: ({ maxDate, minDate }) => {
          this.selectDate = minDate.getTime();
          if (maxDate) {
            this.selectDate = "";
          }
        },
        disabledDate: (time) => {
          if (this.selectDate !== "") {
            var year = moment().year();
            var month = moment().month();
            var hh = moment(year + "-" + month)
              .startOf("day")
              .format("YYYY-MM-DD HH:mm:ss");
            let minTime = moment(hh).valueOf();
            let maxTime = moment().endOf("month").valueOf();
            return time.getTime() < minTime || time.getTime() > maxTime;
          }
        },
      },
      cycleList: [
        {
          salaryCycleName: null,
          dateAge: null,
          startMonthType:null,
          startDate:null,
          endMonthType:null,
          endDate:null,
        },
      ],
      salaryProjectList: [],
      employeeList: [],
      lookView: false,
      employerlist: [],
    };
  },
  created() {
    this.getList();
  },
  methods: {
    handleReport(row) {
      this.$router.push({
        path: "/salary/salaryReport",
        query: {
          id: row.id,
        },
      });
    },
    /** 查询薪酬组列表 */
    getList() {
      this.loading = true;
      listSalaryGroup(this.queryParams).then((response) => {
        this.salaryGroupList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        id: null,
        groupName: null,
        groupCode: null,
        groupDesc: null,
        salaryDays: null,
        paymentMethod: null,
        currencyType: null,
        remark: null,
      };
      this.cycleList = [
        {
          salaryCycleName: null,
          dateAge: null,
          startMonthType:null,
          startDate:null,
          endMonthType:null,
          endDate:null,
        },
      ];
      this.salaryProjectList = [];
      this.employeeList = [];
      this.employerlist = [];
      this.lookView = false;
      this.resetForm("form");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    //添加算薪周期
    addCycle() {
      this.cycleList.push({
        salaryCycleName: null,
        dateAge: null,
        startMonthType:null,
          startDate:null,
          endMonthType:null,
          endDate:null,
      });
    },
    //删除算薪周期
    deleteCycle(index) {
      if (index !== -1) {
        this.cycleList.splice(index, 1);
      }
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map((item) => item.id);
      this.single = selection.length !== 1;
      this.multiple = !selection.length;
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset();
      this.open = true;
      this.title = this.$t("add_new_payroll_group");
    },
    geteMployerList(list) {
      this.form.employerList = list.map((item) => {
        return {
          ...item,
          employerId: item.id,
        };
      });
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset();
      const id = row.id || this.ids;
      getSalaryGroup(id).then((response) => {
        this.form = response.data;
        const nowMonth = this.parseTime(new Date(), "{m}");
        const preMonth = this.getLastMonth();
        this.cycleList = this.form.salaryGroupSalaryCycleList.map((item) => {
          if (item.startMonthType && item.endMonthType) {
            item.dateAge = [
              `${item.startMonthType == 1 ? nowMonth : preMonth
              }-${this.parseNumber(item.startDate)}`,
              `${item.endMonthType == 1 ? nowMonth : preMonth
              }-${this.parseNumber(item.endDate)}`,
            ];
          } else {
            item.dateAge = null;
          }
          return item;
        });

        this.salaryProjectList = this.form.salaryGroupProjectList.map(
          (item) => {
            (item.id = item.salaryProjectId),
              (item.projectName = item.salaryProjectName);
            return item;
          }
        );

        this.employeeList = this.form.salaryGroupPersonnelInformationList;

        if (this.form.employerList.length > 0) {
          let list = [];
          this.form.employerList.forEach((element) => {
            list.push(element.employer);
          });
          this.employerlist = list;
        }

        this.open = true;
        this.title = this.$t("modify");
      });
    },
    handleView(row) {
      this.reset();
      const id = row.id || this.ids;
      getSalaryGroup(id).then((response) => {
        this.form = response.data;
        const nowMonth = this.parseTime(new Date(), "{m}");
        const preMonth = this.getLastMonth();
        this.cycleList = this.form.salaryGroupSalaryCycleList.map((item) => {
          if (item.startMonthType && item.endMonthType) {
            item.dateAge = [
              `${item.startMonthType == 1 ? nowMonth : preMonth
              }-${this.parseNumber(item.startDate)}`,
              `${item.endMonthType == 1 ? nowMonth : preMonth
              }-${this.parseNumber(item.endDate)}`,
            ];
          } else {
            item.dateAge = null;
          }
          return item;
        });

        this.salaryProjectList = this.form.salaryGroupProjectList.map(
          (item) => {
            (item.id = item.salaryProjectId),
              (item.projectName = item.salaryProjectName);
            return item;
          }
        );

        this.employeeList = this.form.salaryGroupPersonnelInformationList;

        if (this.form.employerList.length > 0) {
          let list = [];
          this.form.employerList.forEach((element) => {
            list.push(element.employer);
          });
          this.employerlist = list;
        }

        this.open = true;
        this.lookView = true;
        this.title = this.$t("view");
      });
    },
    parseNumber(num) {
      return num < 10 ? `0${num}` : num;
    },
    getLastMonth() {
      let date = new Date();
      let year = date.getFullYear();
      let month = date.getMonth();
      if (month == 0) {
        year = year - 1;
        month = 12;
      }
      return this.parseNumber(month);
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          if (this.form.employerList.length == 0) {
            this.$message.warning(this.$t("select_employer"));
            return;
          }
          this.form.salaryGroupSalaryCycleList = this.cycleList
          // let nowMonth = this.parseTime(new Date(), "{m}");
          // this.form.salaryGroupSalaryCycleList = this.cycleList.map((item) => {
          //   item.startMonthType = null;
          //   item.startDate = null;
          //   item.endMonthType = null;
          //   item.endDate = null;
          //   if (item.dateAge && item.dateAge.length) {
          //     const startArr = item.dateAge[0].split("-"),
          //       endArr = item.dateAge[1].split("-");
          //     item.startMonthType = startArr[0] == nowMonth ? 1 : 2;
          //     item.endMonthType = startArr[0] == nowMonth ? 1 : 2;
          //     item.startDate = Number(startArr[1]);
          //     item.endDate = Number(endArr[1]);
          //   }
          //   return item;
          // });
          this.form.salaryGroupProjectList = this.salaryProjectList.map(
            (item, index) => {
              return {
                isShowPaySheet: item.isShowPaySheet || 0,
                isShowSalaryReport: item.isShowSalaryReport || 0,
                salaryProjectId: item.id,
                salaryProjectName: item.projectName,
                projectDataSourceValue: item.projectDataSourceValue,
                projectDataSource: item.projectDataSource,
                sort: index + 1,
              };
            }
          );
          this.form.salaryGroupPersonnelInformationList = this.employeeList.map(
            (item, index) => {
              return {
                ...item,
                isShowPaySheet: item.isShowPaySheet || 0,
                isShowSalaryReport: item.isShowSalaryReport || 0,
                sort: index + 1,
              };
            }
          );

          if (this.form.id != null) {
            updateSalaryGroup(this.form).then((response) => {
              this.$modal.msgSuccess(this.$t("operation_successful"));
              this.open = false;
              this.getList();
            });
          } else {
            addSalaryGroup(this.form).then((response) => {
              this.$modal.msgSuccess(this.$t("operation_successful"));
              this.open = false;
              this.getList();
            });
          }
        }
      });
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const ids = row.id || this.ids;
      this.$modal
        .confirm(this.$t("delete_data"))
        .then(function () {
          return delSalaryGroup(ids);
        })
        .then(() => {
          this.getList();
          this.$modal.msgSuccess(this.$t("operation_successful"));
        })
        .catch(() => { });
    },
    /** 导出按钮操作 */
    handleExport() {
      this.download(
        "salary/salaryGroup/export",
        {
          ...this.queryParams,
        },
        `${this.$t("payroll_group_list")}_${new Date().getTime()}.xlsx`
      );
    },

    /** 导入按钮操作 */
    handleImport() {
      this.$refs.importModal.showModal();
    },

    /** 添加薪酬项目 */
    handleAddProject() {
      this.$refs.salaryProjectModal.showModal();
    },
    /** 添加员工项目 */
    handleEmployeeAddProject() {
      this.$refs.employeetModal.showModal();
    },
    setCheckData(list) {
      this.salaryProjectList = list;
    },
    setEmployeeCheckData(list) {
      this.employeeList = list;
    },
    // 薪酬项目
    // 互换位置
    swapArray(arr, index1, index2) {
      arr[index1] = arr.splice(index2, 1, arr[index1])[0];
      return arr;
    },
    // 上移
    handleUpProject(index) {
      this.swapArray(this.salaryProjectList, index, index - 1);
    },
    // 下移
    handleDownProject(index) {
      this.swapArray(this.salaryProjectList, index, index + 1);
    },
    // 删除
    handleDeleteProject(index) {
      this.salaryProjectList.splice(index, 1);
    },
    // 雇员信息
    // 上移
    handleEmployeeUpProject(index) {
      this.swapArray(this.employeeList, index, index - 1);
    },
    // 下移
    handleEmployeeDownProject(index) {
      this.swapArray(this.employeeList, index, index + 1);
    },
    // 删除
    handleEmployeeDeleteProject(index) {
      this.employeeList.splice(index, 1);
    },
  },
};
</script>
<style lang="scss" scoped>
.project-content {
  margin: 20px 0;

  .project-item {
    margin: 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;

    &-name {
      width: 300px;
    }

    .project-option {
      width: 160px;
    }
  }
}
</style>
<style lang="scss">
.date-age .el-input-group__append,
.el-input-group__prepend {
  padding: 0;
  border: none;
}
</style>
